<template>
	<a-config-provider :theme="{
      algorithm: currentTheme === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm,
    }">
		<RouterView />
	</a-config-provider>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { theme } from 'ant-design-vue';
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/stores';

const themeStore = useThemeStore();
const { currentTheme } = storeToRefs(themeStore);

onMounted(() => {
	const appEl = document.getElementById('app');
	if(currentTheme.value === 'dark') {
		appEl?.classList.remove('light');
		appEl?.classList.add('dark');
	} else {
		appEl?.classList.remove('dark');
		appEl?.classList.add('light');
	}
});

type User = {
	id: number;
	name: string;
}

const user = ref<User>({
	id: 1,
	name: 'John Doe'
});

console.log(user.value);

</script>

<style scoped></style>
